<template>
  <div>
    <el-card>
      <!--    面包屑-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>撤销订单</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
      <!--    表格-->
      <el-table :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pagesize,pageInfo.curPage*pageInfo.pagesize)" border style="width: 100%">
        <el-table-column fixed prop="id" label="客户编号" width="80"></el-table-column>
        <el-table-column prop="name" label="客户姓名" width="100"></el-table-column>
        <el-table-column prop="phone" label="移动电话" width="150"></el-table-column>
        <el-table-column prop="email" label="邮箱号码" width="200"></el-table-column>
        <el-table-column prop="emailNumber" label="邮编" width="100"></el-table-column>
        <el-table-column prop="address" label="联系地址" width="300"></el-table-column>
        <el-table-column prop="employer" label="工作单位" width="300"></el-table-column>
        <el-table-column prop="landline" label="座机" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
           <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">移除</el-button>
        </el-table-column>
      </el-table>
 <!--    分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.curPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
        </el-pagination>
    </el-card>
  </div>
</template>
<script>
    export default {
        data(){
          return{
            tableData:[],
              // 分页
              pageInfo: {
                query:'',
                curPage:1,
                pagesize:5
              },
              total:0,
          }
        },
        methods:{
          async getList() {
            const { data: res } = await this.$http
            .get(`/api/order_manager/query_all_order/${0}`)
            .catch(err=>{
              this.$message.error('对不起，服务器异常或没有权限！请多试几次')
              console.log(err.message)
            })
            if(res.code!==200){
              this.$message.error(res.msg)
            }
            console.log(res)
            this.tableData=res.data
            this.total=res.data.length
          },
           // 分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageInfo.pagesize=val
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageInfo.curPage=val
            },
        },
        created(){
          this.getList()
        }
    }
</script>

<style scoped>

</style>
